<template>
  <div
    class="uploader"
    @dragenter="OnDragEnter"
    @dragleave="OnDragLeave"
    @dragover.prevent
    @drop="OnDrop"
    :class="{ dragging: isDragging }"
  >
    <div class="upload-control" v-show="videos.length">
      <label for="file">Select a file</label>
      <button @click="upload">Upload</button>
    </div>
    <div v-show="!videos.length">
      <i class="fa fa-cloud-upload"></i>
      <p>Drag your video here</p>
      <div>OR</div>
      <div class="file-input">
        <label for="file">Select a file</label>
        <input type="file" id="file" @change="onInputChange" multiple />
      </div>
    </div>
    <div class="videos-preview" v-show="videos.length">
      <div class="video-wrapper" v-for="(video, index) in videos" :key="index">
        <video
          class="video"
          :src="video"
          controls="true"
          controlsList="nodownload"
        ></video>
        <!--<div class="details">
          <span class="name" v-text="files[index].name"></span>
           <span class="size" v-text="getFileSize(files[index].size)"></span> 
        </div>-->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "videoUpload",
  data() {
    return {
      isDragging: false,
      dragCount: 0,
      files: [],
      videos: [],
    };
  },
  methods: {
    onInputChange(e) {
      const files = e.target.files;
      Array.from(files).forEach((file) => this.addVideo(file));
    },
    OnDragEnter(e) {
      e.preventDefault();
      this.dragCount++;
      this.isDragging = true;
    },
    OnDragLeave(e) {
      e.preventDefault();
      this.dragCount--;
      if (this.dragCount <= 0) this.isDragging = false;
    },
    OnDrop(e) {
      e.preventDefault();
      e.stopPropagation();
      this.isDragging = false;
      const files = e.dataTransfer.files;
      Array.from(files).forEach((file) => this.addVideo(file));
    },
    addVideo(file) {
      if (!file.type.match("video.*")) {
        this.$message.error(`${file.name} is not an video`);
        return;
      }
      this.files.push(file);
      const reader = new FileReader();
      reader.onload = (e) => this.videos.push(e.target.result);
      reader.readAsDataURL(file);
    },
    async upload() {
      const formData = new FormData();
      formData.append("video", this.videos[0]);
      console.log(this.videos[0]);
      //console.log(this.files);
      const res = await this.$http.post("/video", formData);
      if (res.status == 200) {
        this.$message.success("Video uploaded successfully");
        this.$emit("upload", res.data);
        this.images = [];
        this.files = [];
      } else {
        this.$message.error("Video uploaded failed");
      }
      console.log(res);
    },
    getFileSize(size) {
      const fSExt = ["Bytes", "KB", "MB", "GB"];
      let i = 0;
      while (size > 900) {
        size /= 1024;
        i++;
      }
      return `${Math.round(size * 100) / 100} ${fSExt[i]}`;
    },
  },
};
</script>

<style lang="less" scoped>
.uploader {
  width: 40%;
  left: 200px;
  height: 600px;
  background-color: grey;
  color: #fff;
  padding: 40px 15px;
  text-align: center;
  border-radius: 10px;
  border: 3px dashed #fff;
  font-size: 20px;
  position: relative;

  &.dragging {
    background: #fff;
    color: #2196f3;
    border: 3px dashed #2196f3;
    .file-input label {
      background: #2196f3;
      color: #fff;
    }
  }
  i {
    margin-top: 130px;
    font-size: 85px;
  }
  .file-input {
    width: 200px;
    margin: auto;
    height: 68px;
    position: relative;
    label,
    input {
      background: #fff;
      color: #2196f3;
      width: 100%;
      position: absolute;
      left: 0;
      top: 0px;
      padding: 10px;
      border-radius: 4px;
      margin-top: 7px;
      cursor: pointer;
    }
    input {
      opacity: 0;
      z-index: -2;
    }
  }

  .video {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .videos-preview {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    margin-top: 20px;
    overflow: hidden;
    .video-wrapper {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      box-shadow: 5px 5px 20px #3e3737;
    }
    .details {
      font-size: 12px;
      background: #fff;
      color: #000;
      display: flex;
      flex-direction: column;
      align-items: self-start;
      padding: 3px 6px;
      .name {
        overflow: hidden;
        height: 18px;
      }
    }
  }
  .upload-control {
    position: absolute;
    background: linear-gradient(to top, grey, white) no-repeat 0 0 / cover;
    width: 100%;
    height: 50px;
    top: 0;
    left: 0;
    border-top-left-radius: 7px;
    border-top-right-radius: 10px;
    padding: 0px;
    padding-bottom: 4px;
    text-align: right;
    button,
    label {
      background: #2196f3;
      border: 2px solid #03a9f4;
      border-radius: 3px;
      color: #fff;
      font-size: 15px;
      cursor: pointer;
    }
    label {
      padding: 2px 5px;
      margin-right: 80px;
      margin-top: 15px;
    }
    button {
      margin-right: 120px;
      margin-top: 14px;
      height: 28px;
    }
  }
}
</style>
